<template>
	<view class="mainBg h100 ">
		<view class="container">
			<view class="logo">
				<image src="@/static/logo.svg" mode=""></image>
				<view class="">
					妙有芯世界
				</view>
			</view>
			<view class="form">
				<view class="col">
					<image src="@/static/login/form-icon4.svg" mode=""></image>
					<input v-model="form.nickname" placeholder="姓名※" />
				</view>
				<view class="col">
					<image src="@/static/login/form-icon13.svg" mode=""></image>
					<input v-model="form.password" type="password" placeholder="密码※" />
				</view>
				<view class="col">
					<image src="@/static/login/form-icon5.svg" mode=""></image>
					<uni-datetime-picker type="date" v-model="form.birthday" placeholder="出生日期" @change="change" />
				</view>
				<view class="item">
					<view class="col">
						<image src="@/static/login/form-icon6.png" mode=""></image>
						<uni-data-picker v-model="form.mode" :localdata="items" placeholder="职业/年资" popup-title="职业/年资"
							@change="onchange"></uni-data-picker>
					</view>
				</view>
				<view class="item">
					<view class="col">
						<image src="@/static/login/form-icon12.svg" mode=""></image>
						<uni-data-select placeholder="领域※" :localdata="range"
							@change="onChangeDomain">{{form.domain}}</uni-data-select>
					</view>
					
				</view>
				<view class="item"  v-if="form.domain === `自定义`" >
					<view class="col">
						<image src="@/static/login/form-icon9.svg" mode=""></image>
						<input v-model="form.diy_domain" type="text" placeholder="请输入领域" />
					</view>
				
				</view>
				<view class="col">
					<image src="@/static/login/form-icon10.svg" mode=""></image>
					<input v-model="form.enterprise" type="text" placeholder="企业※" />
				</view>
				<view class="col">
					<image src="@/static/login/form-icon11.svg" mode=""></image>
					<input v-model="form.position" type="safe-password" placeholder="岗位 " />
				</view>
			</view>
			<view class="submit" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import sendCode from '@/components/sendCode.vue'
	export default {
		components: {
			sendCode
		},
		data() {
			return {
				form: {
					phone: '',
					password: '',
					nickname: '',
					birthday: '',
					profession: '',
					seniority: '',
					domain: '',
					enterprise: '',
					position: ''
				},
				items: [{
						text: "学生",
						value: "1",
						children: [{
								text: "大三",
								value: "11"
							},
							{
								text: "大四",
								value: "12"
							}, {
								text: "研一",
								value: "13"
							},
							{
								text: "研二",
								value: "14"
							},
							{
								text: "博士",
								value: "15 "
							}
						]
					},
					{
						text: "职员",
						value: "2",
						children: [{
								text: "1年",
								value: "21"
							},
							{
								text: "2年",
								value: "22"
							}, {
								text: "3年",
								value: "23"
							},
							{
								text: "4年",
								value: "24"
							},
							{
								text: "5年",
								value: "25 "
							}
						]
					},
					{
						text: "其他",
						value: "3",
						children: [{
								text: "1年",
								value: "31"
							},
							{
								text: "2年",
								value: "32"
							}, {
								text: "3年",
								value: "33"
							},
							{
								text: "4年",
								value: "34"
							},
							{
								text: "5年",
								value: "35"
							}
						]
					}
				],
				value: null,
				range: [{
						value: 0,
						text: "微电子"
					},
					{
						value: 1,
						text: "计算机 "
					},
					{
						value: 2,
						text: "通信类"
					}, {
						value: 3,
						text: "自定义"
					},
				],
			}
		},
		onLoad(option) {
			this.form.phone = option.phone
		},
		methods: {
			change(e) {
				this.form.birthday = e
			},
			onchange(e) {
				this.value = e.detail.value[0].text + "--" + e.detail.value[1].text
				this.form.profession = e.detail.value[0].text
				this.form.seniority = e.detail.value[1].text
			},
			onChangeDomain(e) {
				this.form.domain = this.range[e].text
			},
			submit() {
				if(!this.form.nickname)
				{
					this.$toast("请输入姓名")
					return false
				}
				if(!this.form.password)
				{
					this.$toast("请设置密码")
					return false
				}
				if(!this.form.birthday)
				{
					this.$toast("请选择出生日期")
					return false
				}
				if(!this.form.profession)
				{
					this.$toast("请选择职业")
					return false
				}
				if(!this.form.seniority)
				{
					this.$toast("请输入年资")
					return false
				}
				if(!this.form.domain)
				{
					this.$toast("请输入领域")
					return false
				}
				if(!this.form.enterprise)
				{
					this.$toast("请输入企业名称")
					return false
				}
				if(!this.form.position)
				{
					this.$toast("请输入岗位名称")
					return false
				}
				this.form.avatar = '1989768333032235010'  //默认头像OssId
				this.$post("/user/register", this.form).then(res => {
					
					if(res.code == 200)
					{
						this.$toast("注册信息已提交，请等待审核！")
						setTimeout(()=>{
							uni.reLaunch({
								url: "/pages/login/login"
							})
						},2000)
						
					}else{
						this.$toast(res.msg)
						return false
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #35CBAD;
	}

	.logo {
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 180rpx;

		image {
			width: 104rpx;
			height: 104rpx;
		}
	}

	.form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 40rpx;
		margin-top: 50rpx;

		.col {
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 1px solid #eee;
			position: relative;

			image {
				width: 36rpx;
				height: 32rpx;
			}

			input {
				font-size: 28rpx;
				padding: 0 20rpx;
			}
		}
	}

	.submit {
		background: linear-gradient(180deg, #4095E5, #51C76C);
		text-align: center;
		border-radius: 100px;
		color: #fff;
		line-height: 82rpx;
		font-size: 32rpx;
		margin-top: 80rpx;
	}

	::v-deep .input-value-border {
		border: none;
	}

	::v-deep .placeholder,
	::v-deep.uni-select__input-placeholder {

		font-size: 28rpx;
	}

	::v-deep .uni-date-x--border,
	::v-deep .uni-select {
		border: none;
	}

	::v-deep .input-value {
		line-height: 1;
		height: auto;
	}

	::v-deep .uni-date-editor--x {
		padding-left: 12rpx;
	}

	::v-deep .uni-date-x .icon-calendar {
		display: none;
	}


	::v-deep .uni-select__selector-item {
		* {
			line-height: 80rpx !important;
		}
	}
</style>